<template>
  <div>
    <div class="header fda">
      <div class="logotxt">
        <img src="../assets/xwylogo.png" alt="" />
        <span>江苏弦外音智造科技有限公司</span>
      </div>
      <div class="header_right fda">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#000"
          text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/brief"> 公司简介 </router-link>
          </el-menu-item>
          <el-menu-item index="3"><router-link to="/give">服务内容</router-link></el-menu-item>
          <el-menu-item index="4">
            <router-link to="/excellentCase">成功案例</router-link>
          </el-menu-item>
          <el-menu-item index="5"
            ><router-link to="/cooperate?id=1"
              >合作机构</router-link
            ></el-menu-item
          >
          <el-menu-item index="6"
            ><router-link to="/news?id=1">新闻资讯</router-link></el-menu-item
          >
          <el-menu-item index="7">
            <router-link to="/contact?id=1">在线合作</router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/legal">法务服务</router-link>
          </el-menu-item>
        </el-menu>
        <div class="put" style="display: flex">
          <el-input placeholder="请输入内容" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="block">
      <el-carousel height="7rem" indicator-position="none" :autoplay="false">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img style="width: 100%" :src="item.image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <el-tabs :tab-position="tabPosition" v-model="editableTabsValue">
        <el-tab-pane label="新闻资讯" disabled>新闻资讯</el-tab-pane>
        <el-tab-pane label="实时动态">
          <div style="padding: 0 0 0 0.46rem">
            <div
              class="list fd"
              @click="det(item.id)"
              v-for="item in newsArr"
              :key="item.id"
              @mouseenter="yiru(item.id)"
              @mouseleave="yichu(item.id)"
            >
              <div>
                <img src="../assets/listimg.png" alt="" />
              </div>
              <div style="width: 3.92rem">
                <div class="name">{{ item.title || "" }}</div>
                <div class="xq">
                  {{ item.introduction || "" }}
                </div>
              </div>
              <div class="fd liang" v-if="item.id == aa">
                <div class="rq">
                  {{ item.dated || "" }}
                </div>
                <div class="jt">
                  <img src="../assets/jt.png" alt="" />
                </div>
              </div>
              <div class="fd liang" v-else style="border: 1px solid #E0E0E0;"> 
                <div class="rq">
                  {{ item.dated || "" }}
                </div>
                <div class="jt">
                  <img src="../assets/jthui.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="footer">
      <div class="fd nei">
        <div class="footer_left">
          <img src="../assets/logohui.png" class="logohui" alt="" />
          <p style="margin: 0.12rem auto">©江苏弦外音智造科技有限公司</p>
          <p>京ICP证888888号</p>
        </div>
        <div>
          <p style="font-size: 0.17rem; font-weight: 600">
           <a href="https://www.amap.com/search?query=%E5%8D%97%E4%BA%AC%E5%B8%82%E6%A0%96%E9%9C%9E%E5%8C%BA%E5%85%B4%E6%99%BA%E7%A7%91%E6%8A%80%E5%9B%ADA%E5%BA%A711%E6%A5%BC&city=320000&geoobj=117.784963%7C31.496393%7C120.311263%7C32.627805&zoom=9.65">地址：南京市栖霞区兴智科技园A座11楼</a> 
          </p>
          <p style="margin: 0.14rem auto">
            微信：19996669669
          </p>
          <p><a href="tel:19996669669">全国24小时服务热线：199 9666 9669</a></p>
          <p style="margin-top: 0.13rem"><a href="https://mail.163.com/">商务合作邮箱：m19996669669@163.com</a> </p>
        </div>
        <div>
          <img class="footer_ma" src="../assets/ma.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { banner, newsList } from "@/api/user";
export default {
  data() {
    return {
      aa: 0,
      list: [],
      input4: "",
      tabPosition: "left",
      editableTabsValue: "2",
      form: {
        name: "",
        phone: "",
        beizhu: "",
      },
      queryForm: {
        type: 1,
      },
      newsArr: {},
    };
  },
  created() {},
  onshow() {},
  mounted() {
    console.log(this.$route.query.id);
    this.editableTabsValue = this.$route.query.id;
    banner(this.queryForm).then((response) => {
      console.log(response);
      this.list = response.rows;
    });
    newsList().then((response) => {
      console.log(response);
      this.newsArr = response.rows;
      for (var i = 0; i < this.newsArr.length; i++) {
        this.newsArr[i].dated = this.timestampToTime(this.newsArr[i].dated);
      }
    });
  },
  methods: {
    yiru(e) {
      // (item.id)
      this.aa = e;
      this.showa = true;
    },
    yichu(e) {
      // (item.id)
      this.aa = 0;
      this.showa = false;
    },
    timestampToTime(cjsj) {
      var date = new Date(cjsj * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return M + D;
    },
    clickChange(lab) {
      console.log(lab, "123");
      this.tabPosition = lab;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 返回上一层
    go() {
      this.$router.go(-1);
    },
    // // 查看用户
    det(e) {
      console.log("123");
      this.$router.push("/xq?id="+e);
    },
  },
};
</script>
 
<style  lang="less" scoped>
/deep/.el-menu-item {
  font-size: 0.14rem;
  padding: 0 0.2rem;
  cursor: pointer;
}
/deep/.el-submenu__title {
  font-size: 0.14rem;
  color: #303133;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
.list {
  width: 10.56rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.01rem solid #f6f6f6;
  margin-bottom: 0.4rem;
  img {
    width: 3.44rem;
  }
  .name {
    color: #303030;
    font-size: 0.18rem;
    text-decoration: underline;
    margin-top: 0.18rem;
  }
  .xq {
    color: #aaaaaa;
    font-size: 0.16rem;
  }
  .liang {
    width: 1.5rem;
    height: 0.76rem;
    border: 0.01rem solid #007aff;
    box-sizing: border-box;
    font-size: 0.18rem;
    text-align: center;
    // align-items: center;
    .rq {
      padding: 0 0.1rem;
      box-sizing: border-box;
      line-height: 0.76rem;
    }
    .jt {
      img {
        width: 0.74rem;
      }
    }
  }
}
.shuru {
  margin-bottom: 0.24rem;
  width: 48%;
  .name {
    font-size: 0.16rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
  }
}
.shurumax {
  margin-bottom: 0.24rem;
  .name {
    font-size: 0.16rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
  }
}
.btn {
  text-align: center;
}
.name {
  margin-bottom: 0.48rem;
  .a {
    font-size: 0.32rem;
    font-weight: 600;
  }
  .b {
    font-size: 0.2rem;
  }
}
/deep/.is-active {
  background-color: #f6f6f6;
  color: #484848;
}
/deep/.el-tabs__header {
  border: 0.01rem solid #f6f6f6;
}
/deep/.is-disabled {
  color: #fff !important;
  background-color: #000000;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: #fff;
}
.box {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 0.6rem;
  margin-top: 0.47rem;
}
/deep/.el-radio-button__inner:hover {
  color: #aaaaaa !important;
}
.tab {
  margin: 0.51rem 0 0.42rem 0;
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.el-input__inner {
  border-radius: 1rem !important;
}
.header {
  width: 100%;
  padding: 0.19rem 0.32rem;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  .logotxt {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    font-weight: 600;
    img {
      width: 0.44rem;
      margin-right: 0.12rem;
    }
  }
  .header_right {
    .put {
      width: 1.8rem;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 0.14rem;
  opacity: 0.75;
  line-height: 1.5rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.footer {
  width: 100%;
  background-color: #f6f6f6;
  padding: 0.54rem 0;
  box-sizing: border-box;
  .nei {
    width: 70%;
    margin: 0 auto;
    text-align: left;
    color: #484848;
    font-size: 0.15rem;
    .footer_ma {
      width: 1.2rem;
    }
    .logohui {
      width: 0.56rem;
    }
  }
}
</style>